<template>
    <el-table :data="dataAdminList" style="width: 100%">
        <el-table-column prop="adminid" label="管理员编号" />
        <el-table-column prop="adminname" label="管理员用户名" />
        <el-table-column prop="role" label="管理员权限" width="180">
            <template #default="scope">
                <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="flag" label="操作" v-if="crud.charAt(3) === '1' || crud.charAt(2) === '1'">
            <template #default="scope">
                <el-popconfirm title="您确认删除吗？" @confirm="delAdmin(scope.row.adminid, $event)" v-if="crud.charAt(3) === '1'">
                    <template #reference>
                        <el-button type="warning" plain>删除</el-button>
                    </template>
                </el-popconfirm>
                <el-button type="success" plain @click="editDetailAdmin(scope.row.adminname)"
                    v-if="crud.charAt(2) === '1'">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <EditDetail :adminName="(<string>editAdminName)" v-show="showEdit" @hide="showEdit = false"></EditDetail>
</template>

<script setup lang="ts">
import service from '../../../utils/service';
import { reactive, ref } from "vue"
import { ElMessage } from 'element-plus'
import { AxiosResponse } from "axios"
import EditDetail from './EditDetail.vue';
import { useRoute } from "vue-router"
const $route = useRoute()
const crud = $route.meta.crud as string
type TAdminList = {
    checkedKeys: string[],
    _id: string,
    adminid: string,
    adminname: string,
    password: string,
    role: number
}

const dataAdminList = reactive<TAdminList[]>([])

// 获取管理员列表
const getAdminData = () => {
    service({
        url: `/admin/list`,

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            dataAdminList.length = 0
            dataAdminList.push(...res.data.data)
        }
    })
}
getAdminData()

// 删除管理员信息
const delAdmin = (adminid: string, e: Event) => {


    service({
        url: `/admin/delete`,
        method: "post",
        data: {
            adminid
        }

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            ElMessage({
                showClose: true,
                message: "删除成功了，亲！！！",
                type: "success"
            })
            getAdminData()
        }
    })
}

// 修改信息页面的显示隐藏
const editAdminName = ref<string>()
const showEdit = ref<Boolean>(false)


const editDetailAdmin = (name: string) => {
    showEdit.value = true
    editAdminName.value = name
}
</script>

<style scoped></style>